<template>
	<view class="container">
		  <swiper class="swiper" 
		  :indicator-dots="true" 
		  :autoplay="true" 
		  :interval="3000" 
		  :duration="500"
		  style="height: 400rpx;">
			  <swiper-item class="swiper-item" v-for="item in galleryLists" 
			  :key='item.id'
			  @click="goto"
			  >
				  <image :src="item.imgurl"></image>
				  <!-- <image src='../../../static/images/goods.png'></image> -->
			  </swiper-item>
		  </swiper>
		  <!-- 资讯 -->
		  <view class="newsBox">
			  <view class="title">资讯列表</view>
			  <view class="newsItem" v-for="(item,index) in news" :key="index" @click="enterDetail(item.id)">
			  	<!-- <image src='../../../static/images/user/avatar.jpg'></image> -->
				<view class="content">
					<view>[{{item.category_name}}]</view>
					<text>{{item.title}}</text>
				</view>
			  </view>
		  </view>
		  
	</view>
</template>

<script>
	let vm;
export default {
	data() {
		return {
			galleryLists:[
				{
					"order_no": 1,
					"imgurl": "../../../static/images/goods.png",
					"link": "http://www.baidu.com",
					"id": "2c900cc96b5affb9016b68b054ce022c",
					"title": "1"
				},
				{
					"order_no": 2,
					"imgurl": "../../../static/images/goods2.png",
					"link": "http://www.qq.com",
					"id": "402880e66a122dcc016a123a1b130098",
					"title": "2"
				},
				{
					"order_no": 3,
					"imgurl": "../../../static/images/goods3.png",
					"link": "http://www.qq.com",
					"id": "402880e66a122dcc016a123a1b130098",
					"title": "2"
				}
			],
			news: [
				{
					category_id: "402880e76a0cb3b4016a0cbce185005c",
					category_name: "废品创业",
					id: "40289b816b75090f016b7524cadd0034",
					order_no: 1,
					title: "名校硕士收废品月薪5万：你嘲笑读书无用，他却在降维打击"
				},
				{
					category_id: "402880e76a0cb3b4016a0cbce185005c",
					category_name: "国内资讯",
					id: "40289b816b75090f016b7524cadd0034",
					order_no: 1,
					title: "汉中中心城区开展农贸市场暨废品回收站点综合整治"
				},
				{
					category_id: "402880e76a0cb3b4016a0cbce185005c",
					category_name: "最新资讯",
					id: "40289b816b75090f016b7524cadd0034",
					order_no: 1,
					title: "神奇建材：：自我清洁、自我疗愈、自我“消失”"
				},
				{
					category_id: "402880e76a0cb3b4016a0cbce185005c",
					category_name: "最新资讯",
					id: "40289b816b75090f016b7524cadd0034",
					order_no: 1,
					title: "神奇建材：：自我清洁、自我疗愈、自我“消失”"
				},
				{
					category_id: "402880e76a0cb3b4016a0cbce185005c",
					category_name: "最新资讯",
					id: "40289b816b75090f016b7524cadd0034",
					order_no: 1,
					title: "神奇建材：：自我清洁、自我疗愈、自我“消失”"
				},
				
			],
		};
	},
	onLoad() {
		vm = this
		
		// vm.getGalleryList()
		// vm.getNewsList()
	},
	onShow() {
		console.log('onshow')
		
		
	},
	
	methods: {
		getGalleryList(){
			vm.$api.getGalleryList()
			.then(res => {
				this.galleryLists = res.list
			})
		},
		getNewsList(){
			vm.$api.getNewsList()
			.then(res => {
				this.news = res.list
			})
		},
		enterDetail(id){
			uni.navigateTo({
				url:`../../newsDetail/newsDetail?id=${id}`
			})
		}
	}
};
</script>

<style lang="scss">
.content {
	text-align: center;
	// margin-top: 200upx;
}
.swiper-item{
	background: #fff;
	height: 100%;
	width: 100%;
	image{
		height: 100%;
		width: 100%;
	}
}
.newsBox{
	background: #fff;
	margin: 20rpx;
	border-radius: 10rpx;
	box-shadow: 0 0 1px 5rpx #F1F1F1;
	padding: 20rpx 0;
	.title{
		margin: 0 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #3BBDC5;
		border-bottom: 2rpx solid #3BBDC5;
	}
	.newsItem{
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		margin: 0 20rpx;
		border-bottom: 2rpx solid #f1f1f1;
		image{
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
			flex-shrink: 0;
			margin-right: 20rpx;
		}
	}
	.content{
		text-align: left;
		view{
			height: 50rpx;
			line-height: 50rpx;
		}
		text{
			color: #999999;
		}
	}
	
}
</style>
